<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>修改我的信息</title>
<!-- Bootstrap -->
<link href="http://www.udppvr.cn:80/static/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link href="./css/profile_style.css" rel="stylesheet">
<link href="./css/response.css" rel="stylesheet">
<link href="./css/bootstrapValidator.css"
	rel="stylesheet">
<link href="./css/default.css"
	rel="stylesheet">
<link href="./css/fileinput.css"
	rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
      <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/lib/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/lib/bootstrap.min.js"></script>
<script src="./js/lib/bootstrapValidator.min.js"></script>
<script src="./js/lib/fileinput.min.js"></script>
<script src="./js/lib/fileinput_locale_zh.js"></script>
<script src="./js/lib/style.js"></script>
<script type="text/javascript">
	//初始化表单验证
	$(function (){
		$('#fm').bootstrapValidator({
		       live: 'disabled',
		       message: '输入有误',
		       feedbackIcons: {
		           valid: 'glyphicon glyphicon-ok',
		           invalid: 'glyphicon glyphicon-remove',
		           validating: 'glyphicon glyphicon-refresh'
		       },
		       fields : {
		    	   "tmember.nickName" : {
		    		 validators : {
		    			 notEmpty : {
		    				 message : '<span style="font-size:1.2em;">昵称不能为空！</span>'
		    			 }
		    		 }  
		    	   }
		       }
		});
	});
	//当页面加载完成后，初始化省份列表
	$(function (){
		$.ajax({
			url : 'http://www.udppvr.cn:80/profile/initState.do',
			method : 'get',
			success : function (rs){
				for (var i = 0; i < rs.length; i ++) {
					if($("#stateKey").val() == rs[i].addressKey) {
						k = i;
						$("#state").append('<option selected="selected" value="'+rs[i].addressKey+'">'+rs[i].name+'</option>');
					}else{
						$("#state").append('<option value="'+rs[i].addressKey+'">'+rs[i].name+'</option>');
					}						
				}
				
				initCity(rs[k].addressKey);
			},
			dataType : 'json'
		});
		$("#state").on("change",function (){
			initCity($(this).val());	
		});
	});
	function initCity(stateKey){
		$("#city").empty();
		$.ajax({
			url : 'http://www.udppvr.cn:80/profile/initCity.do?stateKey='+stateKey,
			method : 'get',
			success : function (rs){
				for (var i = 0; i < rs.length; i ++) {
					if($("#cityId").val() == rs[i].id) {
						$("#city").append('<option selected="selected" value="'+rs[i].id+'">'+rs[i].name+'</option>');
					}else{						
						$("#city").append('<option value="'+rs[i].id+'">'+rs[i].name+'</option>');						
					}						
				}	
			},
			dataType : 'json'
		});
	}
</script>
</head>
<body style="margin:5px;">
	<div class="prolist">
		<form id="fm" method="post" action="http://www.udppvr.cn:80/profile/updateMember.do">
				<input type="hidden" name="tmember.id" value="32892"/>
			<div class="form-group input-group">
				<span class="input-group-addon">昵称</span> <input type="text"
					id="nickName" name="tmember.nickName" class="form-control" value="冰峰"
					placeholder="请输入昵称" />
			</div>
			<div class="form-group input-group">
				<span class="input-group-addon">手机</span> <input type="text" readonly="readonly"
					id="telephone" name="tmember.telephone" class="form-control" value="15129040601"
					placeholder="绑定微信手机号" />
			</div>
			<div class="form-group input-group">
				<span class="input-group-addon">性别</span>
				<div class="form-control">
					<label class="checkbox-inline"> <input type="radio"
						name="tmember.gender" id="gender_man" value="男" checked >男
					</label> <label class="checkbox-inline"> <input type="radio"
						name="tmember.gender" id="gender_woman" value="女" > 女
					</label>
				</div>
			</div>
			<div class="form-group input-group">
				<input type="hidden" id="stateKey" value="027"/>
				<span class="input-group-addon">省份</span> <select id="state"
					class="form-control">
				</select>
			</div>
			<div class="form-group input-group">
				<input type="hidden" id="cityId" value="328"/>
				<span class="input-group-addon">城市</span> <select
					name="tmember.address.id" id="city" class="form-control">
				</select>
			</div>
			<div class="form-group input-group">
				<span class="input-group-addon">头像</span> 
				<select class="form-control" name="tmember.photo" onchange="javascript:document.getElementById('imgBox').src='./images/avatar/'+this.value">
					
						<option value="10.jpg">photo_10</option>
					
						<option value="11.jpg">photo_11</option>
					
						<option value="12.jpg">photo_12</option>
					
						<option value="13.jpg">photo_13</option>
					
						<option value="14.jpg">photo_14</option>
					
						<option value="15.jpg">photo_15</option>
					
						<option value="16.jpg">photo_16</option>
					
						<option value="17.jpg">photo_17</option>
					
						<option value="18.jpg">photo_18</option>
					
						<option value="19.jpg">photo_19</option>
					
						<option value="20.jpg">photo_20</option>
					
						<option value="21.jpg">photo_21</option>
					
						<option value="22.jpg">photo_22</option>
					
						<option value="23.jpg">photo_23</option>
					
						<option value="24.jpg">photo_24</option>
					
						<option value="25.jpg">photo_25</option>
					
						<option value="26.jpg">photo_26</option>
					
						<option value="27.jpg">photo_27</option>
					
						<option value="28.jpg">photo_28</option>
					
						<option value="29.jpg">photo_29</option>
					
						<option value="30.jpg">photo_30</option>
					
						<option value="31.jpg">photo_31</option>
					
						<option value="32.jpg">photo_32</option>
					
						<option value="33.jpg">photo_33</option>
					
						<option value="34.jpg">photo_34</option>
					
						<option value="35.jpg">photo_35</option>
					
						<option value="36.jpg">photo_36</option>
					
						<option value="37.jpg">photo_37</option>
					
						<option value="38.jpg">photo_38</option>
					
						<option value="39.jpg">photo_39</option>
					
						<option value="40.jpg">photo_40</option>
					
						<option value="41.jpg">photo_41</option>
					
						<option value="42.jpg">photo_42</option>
					
						<option value="43.jpg">photo_43</option>
					
						<option value="44.jpg">photo_44</option>
					
						<option value="45.jpg">photo_45</option>
					
						<option value="46.jpg">photo_46</option>
					
						<option value="47.jpg">photo_47</option>
					
						<option value="48.jpg">photo_48</option>
					
						<option value="49.jpg">photo_49</option>
					
						<option value="50.jpg">photo_50</option>
					
						<option value="51.jpg">photo_51</option>
					
						<option value="52.jpg">photo_52</option>
					
						<option value="53.jpg">photo_53</option>
					
						<option value="54.jpg">photo_54</option>
					
						<option value="55.jpg">photo_55</option>
					
						<option value="56.jpg">photo_56</option>
					
						<option value="57.jpg">photo_57</option>
					
						<option value="58.jpg">photo_58</option>
					
						<option value="59.jpg">photo_59</option>
					
						<option value="60.jpg">photo_60</option>
					
						<option value="61.jpg">photo_61</option>
					
						<option value="62.jpg">photo_62</option>
					
						<option value="63.jpg">photo_63</option>
					
						<option value="64.jpg">photo_64</option>
					
						<option value="65.jpg">photo_65</option>
					
						<option value="66.jpg">photo_66</option>
					
						<option value="67.jpg">photo_67</option>
					
						<option value="68.jpg">photo_68</option>
					
						<option value="69.jpg">photo_69</option>
					
						<option value="70.jpg">photo_70</option>
					
						<option value="71.jpg">photo_71</option>
					
						<option value="72.jpg">photo_72</option>
					
						<option value="73.jpg">photo_73</option>
					
						<option value="74.jpg">photo_74</option>
					
						<option value="75.jpg">photo_75</option>
					
						<option value="76.jpg">photo_76</option>
					
						<option value="77.jpg">photo_77</option>
					
						<option value="78.jpg">photo_78</option>
					
						<option value="79.jpg">photo_79</option>
					
						<option value="80.jpg">photo_80</option>
					
						<option value="81.jpg">photo_81</option>
					
						<option value="82.jpg">photo_82</option>
					
						<option value="83.jpg">photo_83</option>
					
						<option value="84.jpg">photo_84</option>
					
						<option value="85.jpg">photo_85</option>
					
						<option value="86.jpg">photo_86</option>
					
						<option value="87.jpg">photo_87</option>
					
						<option value="88.jpg">photo_88</option>
					
						<option value="89.jpg">photo_89</option>
					
						<option value="90.jpg">photo_90</option>
					
						<option value="91.jpg">photo_91</option>
					
						<option value="92.jpg">photo_92</option>
					
						<option value="93.jpg">photo_93</option>
					
						<option value="94.jpg">photo_94</option>
					
						<option value="95.jpg">photo_95</option>
					
						<option value="96.jpg">photo_96</option>
					
						<option value="97.jpg">photo_97</option>
					
						<option value="98.jpg">photo_98</option>
					
						<option value="99.jpg">photo_99</option>
					
				</select>
				<img src="http://www.udppvr.cn:80//static/user_pics/10.jpg" id="imgBox"/>
			</div>
			<input type="submit" class="btn btn-primary btn-lg btn-block"
				value="修改" />
		</form>
		<div class="clearfix"></div>
	</div>
	<!--prolist/-->
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">修改我的信息</h4>
				</div>
				<div class="modal-body" id="modelText"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
</html>